<template>
   <div>
        <el-form :model="model" label-width="120px" Id="selectForm" :rules="rulesForm" ref="dataForm">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="物料编码" prop="iteM_CODE">
                            <el-input style="width:215px; " size="small" v-model="model.iteM_CODE" placeholder="请输入物料编码" autocomplete="off"></el-input>
                            <el-switch v-if="!isUpdate" style="margin-left:10px;" v-model="isCheck" active-color="#13ce66" inactive-color="#e2e2e2"></el-switch>
                            <span v-if="!isUpdate" style="margin-left:5px;">自动生成</span>
                        </el-form-item>
                        
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light" prop="iteM_NAME">
                        <el-form-item label="物料名称" prop="iteM_NAME">
                            <el-input size="small" v-model="model.iteM_NAME" placeholder="请输入物料名称" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item label="规格型号">
                <el-input type="textarea" v-model="model.specification" placeholder="请输入内容" autocomplete="off"></el-input>
            </el-form-item>

            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="单位" prop="measurE_ID" class="itemClass">
                            <el-select size="small" class="select-height" v-model="model.measurE_ID" placeholder="请选择" clearable>
                                <el-option v-for="item in unitData" :value="item.measurE_ID" :key="item.measurE_ID"
                                    :label="item.measurE_NAME">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="物料/产品分类" prop="iteM_TYPE_ID">
                            <treeselect size="small" v-model="model.iteM_TYPE_ID" :options="options" 
                                :normalizer="normalizer" :showCount="true" :value="model.iteM_TYPE_ID" :max-height="200"
                                placeholder="请选择所属分类" :disabled="isDisaBled" />
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="是否启用">
                            <el-radio-group v-model="model.enablE_FLAG">
                                <el-radio :label="0" >启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="安全库存">
                            <el-radio-group v-model="model.safE_STOCK_FLAG">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            
            <el-row v-if="model.safE_STOCK_FLAG == 1">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form-item label="最小库存量">
                            <el-input-number style="width:200px" v-model="model.miN_STOCK" :min="1" :max="99999" placeholder="请输入最小库存"></el-input-number>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="最大库存量">
                            <el-input-number style="width:200px" v-model="model.maX_STOCK" :min="1" :max="99999" placeholder="请输入最大库存"></el-input-number>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            
            <el-form-item label="备注">
                <el-input type="textarea" v-model="model.remark" placeholder="请输入内容" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div style="margin-bottom:25px;">
            <el-tabs type="border-card">
                <el-tab-pane label="BOM组成">
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd" plain>新增</el-button>
                                <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDel" :disabled="isDisable" plain>删除</el-button>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple-light" style="text-align:right;">
                                <el-button  icon="el-icon-refresh" size="small" @click="Refresh" circle></el-button>
                            </div>
                        </el-col>
                    </el-row>
                    <el-table :data="tableData" style="width: 100%;height:100%" ref="dataTable2" v-loading="isloading" 
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column v-if="show" prop="iteM_ID" label="#" width="120" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="iteM_CODE" label="物理编码" width="150" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="iteM_NAME" label="物料名称" width="160" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="specification" label="规格型号" width="150" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column v-if="show" prop="measurE_ID" label="单位ID" width="100" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="measurE_NAME" label="单位" width="100" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="quantitY_RATE" label="使用比例" width="100" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="remark" label="备注" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column fixed="right" label="操作" align="center" width="140">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                            <el-button @click="handleDel(scope.row)" type="text" size="small" icon="el-icon-delete">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="供应商"></el-tab-pane>
            </el-tabs>
        </div>
        <div slot="footer" class="dialog-rights">
            <el-button style="padding:10px 25px;margin-right:10px;" @click="CloseDialog">取 消</el-button>
            <el-button style="padding:10px 25px;" slot="reference" @click="save" type="primary">确 定</el-button>
        </div>
   </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    components:{
        Treeselect
    },
    props:{
        model:{
            type:Object,
            require:true,
        },
        options:{
            type:Array,
            require:true,
        },
        //是否修改
        isUpdate:{
            type:Boolean,
            require:true,
        },
    },
    data(){
        return{
            tableData:[],//产品BOM 数据
            unitData:[],//单位data
            isCheck:false,//Switch
            isDisaBled:false,//禁用
            isDisable:true,//是否禁用按钮
            show:false,//是否显示某列
            isloading:false,//是否打开加载提示
            minNum:1,//最小库存数量
            maxNum:1,//最大库存数量
            rulesForm:{
                iteM_CODE:[{ required : true, message:'请输入物料编码', trigger:'blur'}],
                iteM_NAME:[{ required : true, message:'请输入物料名称', trigger:'blur'}],
                measurE_ID:[{ required : true, message:'请选择单位', trigger:'blur'}]
            }
        }
    },
    methods:{
        CloseDialog(){
            this.$emit('CloseDialog');
        },
        DataBind(){
            this.$emit('DataBind');
        },
        
        UnitDataBind(){
            this.$http.request({
                    type:'get',
                    url:'/api/MaterialProductsManage/GetUnitJson'
                }).then(res =>{
                    if(res.data.code == 200){
                        this.unitData =res.data.data
                    }
                }).catch(err =>{
                    this.ShowMsg('服务器繁忙,请稍后重试','系统提示');
                })
        },
        normalizer(node) {
            if(node.children && !node.children.length){
                delete node.children;
            }
            return {
                id: node.iteM_TYPE_ID,
                label: node.iteM_TYPE_NAME
            };
        },
        //监听dataTable是否有选中项
        handleSelectionChange(val){
            if(val.length > 0){
                this.isDisable = false;
            }
            else if(!val.length){
                this.isDisable =true;
            }
        },
        save(){//新增或修改
            
            this.$refs.dataForm.validate((valid)=>{
                if(valid){
                    if(this.isUpdate){
                        this.$http.putForm('/api/MaterialsProductClassify',{model:this.model})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.DataBind();
                                this.CloseDialog();
                            }
                        })
                        .catch(err =>{
                            this.ShowMsg('服务器繁忙，请稍后重试','error');
                        })
                    }
                    else{
                        this.$http.postForm('/api/MaterialsProductClassify',{model:this.model})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.DataBind();
                                this.CloseDialog();
                            }
                        })
                        .catch(err =>{
                            this.ShowMsg('服务器繁忙，请稍后重试','error');
                        })
                    }
                }
                else{
                    this.ShowMsg('验证不通过','error');
                }
            })
        },
        handleAdd(){

        },
        handleDel(){

        },
        Refresh(){

        }
    },
    created(){
        this.UnitDataBind();
    }
}
</script>

<style scoped>
.dialog-rights{
    text-align: right;
}
#selectForm >>> .el-form-item__content{
    line-height: 35px;
}
#selectForm >>> .vue-treeselect__input-container input{
    height: 34px;
}
</style>